<template>
<div>
	    <!-- 加载 -->
    <div class="example">
        <a-spin size="large" tip="Loading..." :spinning="spinning" />
    </div>
	<div v-if="spinning ==false">

	<a-row>
		<a-col :span="3">
			<a-anchor>
				<a-anchor-link href="#API" title="广告组">
				<a-anchor-link href="#Ad-unit" title="推广目的" />
				</a-anchor-link>
				<a-anchor-link href="#API" title="广告计划">
				<a-anchor-link href="#Ad-unit" title="所属广告组" />
				<a-anchor-link href="#Ad-Range" title="投放范围" />
				<a-anchor-link href="#Ad-target" title="投放目标" />
				<a-anchor-link href="#Ad-dstion" title="用户定向" />
				<a-anchor-link href="#Ad-Budget" title="预算与出价" />
				<a-anchor-link href="#Ad-name" title="计划名称" />
				</a-anchor-link>
				<a-anchor-link href="#API" title="广告创意">
				<a-anchor-link href="#Anchor-Props" title="计划名称" />
				<a-anchor-link href="#Anchor-Props" title="设置投放位置" />
				<a-anchor-link href="#Anchor-Props" title="制作创意" />
				<a-anchor-link href="#Anchor-Props" title="创意分类" />
				<a-anchor-link href="#Anchor-Props" title="监测链接" />
				</a-anchor-link>
			</a-anchor>
		</a-col>
		<a-col :span="20">
				<div class="code-box-demo">
					<div class="ad-row-title" id="Ad-unit">
						所属广告组
					</div>
					<div class="ad-group ad-font-size">
							广告组名称：
							<strong>{{datalist.name}}（{{datalist.id}}）</strong>
						</div>
				</div>
				<a-divider />
			<a-form :form="form">
				<div class="code-box-demos" id="Ad-Range">
					<div class="ad-row-title">
						投放范围<span class="">了解详情</span>
					</div>
					<div class="ad-group">
						<a-form-item
							:label="$t('投放范围')"
							:labelCol="{span: 2}"
							:wrapperCol="{span: 200}"
							:required="true"
						>
							<a-radio-group v-decorator="[
							'delivery_range',
							{ rules:[],initialValue: 'DEFAULT'}
							]"
							@change="onrange" button-style="solid">
								<a-radio-button value="DEFAULT">
									默认
								</a-radio-button>
								<a-radio-button value="UNION">
									穿山甲 &nbsp; <a-icon type="question-circle" @mousemove="onovers" />
								</a-radio-button>
							</a-radio-group>
						</a-form-item>

						<div :class="[delivery_range =='UNION'?'isblock':'isnone']">
							<a-form-item
								:label="$t('投放形式')"
								:labelCol="{span: 2}"
								:wrapperCol="{span: 200}"
								:required="true"
							>
								<a-radio-group v-decorator="[
								'union_video_type',
								{ rules:[],initialValue: 'REWARDED_VIDEO'}
								]"
								@change="onunion" button-style="solid">
									<a-radio-button value="REWARDED_VIDEO">
										激励视频 &nbsp; <a-icon type="question-circle" @mousemove="onovers" />
									</a-radio-button>
									<a-radio-button value="ORIGINAL_VIDEO">
										原生
									</a-radio-button>
									<a-radio-button value="SPLASH_VIDEO">
										开屏
									</a-radio-button>
								</a-radio-group>
								<p style="margin-left:100px;" :class="[union_video_type == 'ORIGINAL_VIDEO' ? 'isblock' : 'isnone']" >信息流内广告，包含视频和图片</p>
							</a-form-item>
						</div>
					</div>
				</div>
				<a-divider />
		<div class="code-box-demos" id="Ad-target">
			<div class="ad-row-title">
				投放目标<span class="">了解详情</span>
			</div>
			<!-- 为app时 -->
			<div :class="[landing_type =='APP' ? 'isblock' : 'isnone']">
				<div class="ad-group">
					<a-form-item :required="true" :labelCol="{span: 2}" :wrapperCol="{span: 200}">
						<span slot="label">
							投放目标&nbsp;
							<a-tooltip title="What do you want others to call you?">
							<a-icon type="question-circle-o" />
							</a-tooltip>
						</span>
						<a-radio-group v-decorator="[
							'pricing',
							{ rules:[],initialValue: 'PRICING_OCPM'}
							]"
							@change="onpricing" button-style="solid">

							<a-radio-button value="PRICING_OCPM">
								转化量 
							</a-radio-button>
							<a-radio-button value="PRICING_CPC">
								点击量
							</a-radio-button>
							<a-radio-button value="PRICING_CPM">
								展示量
							</a-radio-button>
						</a-radio-group>
					</a-form-item>
					<a-form-item
						:label="$t('下载方式')"
						:labelCol="{span: 2}"
						:wrapperCol="{span: 200}"
						:required="true"
					>
						<a-radio-group v-decorator="[
							'download_type',
							{ rules:[],initialValue: 'DOWNLOAD_URL'}
							]"
							@change="ondownload" button-style="solid">

							<a-radio-button value="DOWNLOAD_URL">
								下载链接 
							</a-radio-button>
							<a-radio-button value="EXTERNAL_URL">
								落地页
							</a-radio-button>
						</a-radio-group>
					</a-form-item>
					<div :class="[download_type =='DOWNLOAD_URL' ? 'isblock' : 'isnone']">
						<a-form-item
								:label="$t('下载链接')"
								:labelCol="{span: 2}"
								:wrapperCol="{span: 200}"
								:required="true"
							>
							<div class="form-row">
							<a-input v-decorator="[
							'download_url',
							{ rules: [{  message: '请输入下载链接' }] }
							]" @change="onexternal" style="width:400px;" placeholder="请填写应用下载链接或使用极速下载服务" />
							<!-- <span style="margin-left:5px;color:#2F88FF;cursor:pointer" @click="showappbox">选择应用
								<a-tooltip title="极速下载服务是巨量引擎提供的提升应用下载速度及下载完成率的应用分发服务。了解更多">
									<a-icon type="question-circle" />
								</a-tooltip>
							</span> -->
							</div>
						</a-form-item>
					</div>
					<div :class="[download_type =='EXTERNAL_URL' ? 'isblock' : 'isnone']">
						<a-form-item
								:label="$t('落地页链接')"
								:labelCol="{span: 2}"
								:wrapperCol="{span: 200}"
								:required="true"
							>
							<div class="form-row">
							<a-input-search v-decorator="[
							'external_url',
							{ rules: [{ message: '请输入落地页链接' }],initialValue:externalurl.url}
							]" @change="onexternal" style="width:400px;" placeholder="请输入链接，可使用橙子建站提供的链接或第三方链接">
							</a-input-search>

							<a-button slot="enterButton" style="color:#2F88FF" :loading="ldyloading" @click="onuseldy">
								使用已有
							</a-button>
							<!-- <span style="margin-left:5px;color:#2F88FF">快速新页面<a-icon type="file" /></span> -->
							</div>
						</a-form-item>

						<div class="mfont" v-if="externalurl.url !='' && externalurl.url !=undefined">
								<div style="display:inline-block;"><img :src="externalurl.thumbnail" style="width:50px;height:86px;" alt=""></div>
								<div style="display:inline-block;margin-left:10px;">
									<p><a :href="externalurl.url" target="_blank">{{externalurl.name}}</a></p>
									<p>ID:{{externalurl.siteId}}</p>
								</div>
							</div>
					</div>

					<div :class="[pricings == 'PRICING_OCPM' ? 'isblock' : 'isnone']">	
						<a-form-item :required="true"  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
							<span slot="label">
								转化目标&nbsp;
								<a-tooltip title="What do you want others to call you?">
								<a-icon type="question-circle-o" />
								</a-tooltip>
							</span>
							
							<a-button style="margin-left:10px;" type="primary" @click="onconversion" :loading="externalloading" :disabled="external">选择转化目标</a-button>

						</a-form-item>
					</div>

					<div v-show="track">
						<a-form-item
							:label="$t('转化目标')"
							:labelCol="{span: 3}"
							:wrapperCol="{span: 200}"
							:required="true"
						>
							<div style="display:inline-block;">根据当前填写投放内容，识别出以下可用转化目标：</div>
							<div class="mfont" style="width:500px; height:300px;overflow-y:scroll;">
								<a-list :loading="listloading">
									<a-list-item v-for="item in radiolist" :key="item.id" :value="item.id" style="padding:0;">
										<a-radio-group v-decorator="[
										'convert_id',
										{ rules:[]}
										]" >
										<a-radio class="convertradio" :value="item.id">{{item.name}}</a-radio>
										</a-radio-group>
									</a-list-item>
								</a-list>
								<!-- <a-radio-group >
									<a-radio class="convertradio" v-for="item in radiolist" :key="item.id" :value="item.id">
									{{item.name}} <a>付费</a>
									</a-radio>
								</a-radio-group> -->
							</div>
						</a-form-item>
						
					</div>
					<div :class="[download_type =='DOWNLOAD_URL' ? 'isblock' : 'isnone']">
						<a-form-item :required="true" :labelCol="{span: 2}"
										:wrapperCol="{span: 200}">
							<span slot="label">
								应用包名&nbsp;
								<a-tooltip title="What do you want others to call you?">
								<a-icon type="question-circle-o" />
								</a-tooltip>
							</span>
							<div class="form-row">
							<a-input v-decorator="[
							'package',
							{ rules: [{ message: '请输入应用包名' }] }
							]" onchange="onpackage" style="width:400px;margin-left:10px;" placeholder="" />
							</div>
						</a-form-item>
					</div>

					<div :class="[download_type =='EXTERNAL_URL' ? 'isblock' : 'isnone']">
						<a-form-item :labelCol="{span: 2}" :wrapperCol="{span: 200}">
							<span slot="label">
								直达链接&nbsp;
							</span>
							<div class="form-row">
							<a-radio-group v-decorator="[
								'texts',
								{ rules:[{message: '请选择转化目标' }],initialValue: '1'}
								]"
								@change="onopenurl" button-style="solid">
								<a-radio-button value="1">
									不启用
								</a-radio-button>
								<a-radio-button value="2">
									启用
								</a-radio-button>
								<p :class="[openurl ==2 ? 'isblock' :'isnone']" class="pfont">直达链接仅支持部分App唤起，点击创意将优先跳转App，再根据投放内容跳转相关链接<span class="spanfont">了解详情</span></p>
							</a-radio-group>
							
							</div>
						</a-form-item>

						<div :class="[openurl ==2 ? 'isblock' :'isnone']">
							<a-form-item :labelCol="{span: 2}"
										:wrapperCol="{span: 200}">
							<span slot="label">
								跳转APP链接&nbsp;
							</span>
							
							<div class="form-row">
							<a-input v-decorator="[
							'open_url',
							{ rules: [{ message: '请填写deeplink链接' }] }
							]" onchange="onpackage" style="width:400px;margin-left:10px;" placeholder="请填写deeplink链接，保证可跳转" />
							</div>
						</a-form-item>
						</div>

					</div>

					</div>
				</div>
			</div>

			<!-- 落地页选择盒子 -->
			<a-modal
			title=""
			:visible="visibleld"
			:confirm-loading="confirmLoading"
			@ok="ldyOk"
			@cancel="ldyCancel"
			:width="900"
			:footer="[]"
		>
			<div>
				<a-form layout="horizontal" :form="form8" @submit="handleSubmit">
					<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
					<a-space>
						<a-select style="width:200px;" v-decorator="[
							'lanpage',
							]"  placeholder="请选择方式" @change="onlanpage">
							<a-select-option value="1">橙子落地页</a-select-option>
							<a-select-option value="2">第三方落地页</a-select-option>
						</a-select>
						<a-input style="width:200px;" v-decorator="[
							'name',
							]" placeholder="输入定向包名称关键词" />
						<a-button @click="resetldForm">
							重置
						</a-button>
						<a-button type="primary" @click="serachldy">查询</a-button>
					</a-space>
					</a-form-item>
				</a-form>
				
				<div style="margin-top:20px;">
					<a-list :grid="{ gutter: 16, column: 4 }" :data-source="useldylsit">
						<a-list-item slot="renderItem" slot-scope="item">
						<a-card :bodyStyle="{padding:0}" style="border:1px solid #ddd;" :headStyle="{padding:0}">
						
							<div style="overflow: hidden;height: 356px;position: relative;">
								<img :src="item.thumbnail" style="width:100%;transition-duration: 0s; margin-top: 0px;" alt="">
							</div>
							<div style="padding:10px;">
								<a-button type="primary" @click="onuse(item)" style="width:100%;">立即使用</a-button>
								<p><a :href="item.thumbnail" target="_blank">{{item.name}}</a></p>
								<p>ID:{{item.siteId}}</p>
							</div>
						</a-card>
						</a-list-item>
					</a-list>
				</div>
			</div>
			</a-modal>
			
			<!-- 为LINK时 -->
			<div :class="[landing_type =='LINK' ? 'isblock' : 'isnone']">
				<div class="ad-group">
					<a-form-item :required="true" :labelCol="{span: 2}" :wrapperCol="{span: 200}">
						<span slot="label">
							投放目标&nbsp;
							<a-tooltip title="What do you want others to call you?">
							<a-icon type="question-circle-o" />
							</a-tooltip>
						</span>
						<a-radio-group v-decorator="[
							'pricing',
							{ rules:[],initialValue: 'PRICING_OCPM'}
							]"
							@change="onpricing" button-style="solid">

							<a-radio-button value="PRICING_OCPM">
								转化量 
							</a-radio-button>
							<a-radio-button value="PRICING_CPC">
								点击量
							</a-radio-button>
							<a-radio-button value="PRICING_CPM">
								展示量
							</a-radio-button>
						</a-radio-group>
					</a-form-item>

					<a-form-item
							:label="$t('落地页链接')"
							:labelCol="{span: 2}"
							:wrapperCol="{span: 200}"
							:required="true"
						>
						<div class="form-row">
						<a-input-search v-decorator="[
						'external_url',
						{ rules: [{ required: true, message: '请输入落地页链接' }],initialValue:externalurl.url}
						]" style="width:400px;" placeholder="请输入链接，可使用橙子建站提供的链接或第三方链接">
						</a-input-search>
							<a-button slot="enterButton" style="color:#2F88FF" :loading="ldyloading" @click="onuseldy">
								使用已有
							</a-button>
						</div>
					</a-form-item>

						<div :style="{display:istarget}">	
							<a-form-item :required="true"  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
								<span slot="label">
									转化目标&nbsp;
									<a-tooltip title="What do you want others to call you?">
									<a-icon type="question-circle-o" />
									</a-tooltip>
								</span>
								<a-button style="margin-left:10px;" @click="onconversions" :loading="externalloading" type="primary">选择转化目标</a-button>
							</a-form-item>
						</div>

					<div v-show="tracks">
						<a-form-item
							:label="$t('转化目标')"
							:labelCol="{span: 3}"
							:wrapperCol="{span: 200}"
							:required="true"
						>
							<div style="display:inline-block;">根据当前填写投放内容，识别出以下可用转化目标：</div>
							<div class="mfont" style="width:500px; height:300px;overflow-y:scroll;">
								<a-list :loading="listloading" >
									<a-list-item v-for="item in radiolist" :key="item.id" :value="item.id" style="padding:0;">
										<a-radio-group v-decorator="[
										'convert_id',
										{ rules:[]}
										]" >
										<a-radio class="convertradio" :value="item.id">{{item.name}}</a-radio>
										</a-radio-group>
									</a-list-item>
								</a-list>
								<!-- <a-radio-group >
									<a-radio class="convertradio" v-for="item in radiolist" :key="item.id" :value="item.id">
									{{item.name}} <a>付费</a>
									</a-radio>
								</a-radio-group> -->
							</div>
						</a-form-item>
					</div>	

						<a-form-item :labelCol="{span: 2}"
									:wrapperCol="{span: 200}">
						<span slot="label">
							直达链接&nbsp;
							<a-tooltip title="What do you want others to call you?">
							<a-icon type="question-circle-o" />
							</a-tooltip>
						</span>
						<div class="form-row">
						<a-input v-decorator="[
						'open_url',
						{ rules: [{message: '' }] }
						]" style="width:400px;margin-left:10px;" placeholder="" />
						</div>
					</a-form-item>
				</div>
			</div>

			<!-- 为AWEME -->
			<div :class="[landing_type =='AWEME' ? 'isblock' : 'isnone']">
				<div class="ad-group">
					<a-form-item :required="true" :labelCol="{span: 2}" :wrapperCol="{span: 200}">
						<span slot="label">
							投放目标&nbsp;
							<a-tooltip title="What do you want others to call you?">
							<a-icon type="question-circle-o" />
							</a-tooltip>
						</span>
						<a-radio-group v-decorator="[
							'pricing',
							{ rules:[],initialValue: 'PRICING_OCPM'}
							]"
							@change="onpricing" button-style="solid">

							<a-radio-button value="PRICING_OCPM">
								转化量 
							</a-radio-button>
							<a-radio-button value="PRICING_CPC">
								点击量
							</a-radio-button>
							<a-radio-button value="PRICING_CPM">
								展示量
							</a-radio-button>
						</a-radio-group>
					</a-form-item>

					<a-form-item
							:label="$t('抖音号')"
							:labelCol="{span: 2}"
							:wrapperCol="{span: 200}"
							:required="true"
						>
						<a-radio-group value="0" button-style="solid">
							<a-radio-button @click="choicetiktok" value="0">
								选择抖音号
							</a-radio-button>
						</a-radio-group>
					</a-form-item>

					<div v-show="tiktokbox" class="mfont" style="width:500px;">
						<a-list item-layout="horizontal" :data-source="tiktoklist">
							<a-list-item slot="renderItem" slot-scope="item">
								<a-radio-group :buttonStyle="solid">
									<a-radio :style="radioStyle" :value="item.aweme_id">
										{{item.aweme_name}}
									</a-radio>
								</a-radio-group>
							</a-list-item>
						</a-list>
					</div>

					<a-form-item
						:label="$t('投放内容')"
						:labelCol="{span: 2}"
						:wrapperCol="{span: 200}"
						:required="true"
					>
						<a-radio-group v-decorator="[
								'promotion_type',
								{ rules:[],initialValue: 'AWEME_HOME_PAGE'}
								]"
								@change="onpromotion" button-style="solid">
								<a-radio-button value="AWEME_HOME_PAGE">
									抖音主页
								</a-radio-button>
								<a-radio-button value="LANDING_PAGE_LINK">
									落地页
								</a-radio-button>
						</a-radio-group>
					</a-form-item>


					<div :class="[promotion_type =='LANDING_PAGE_LINK' ? 'isblock' :'isnone']">
						<a-form-item
								:label="$t('落地页链接')"
								:labelCol="{span: 2}"
								:wrapperCol="{span: 200}"
								:required="true"
							>
							<div class="form-row">
							<a-input-search v-decorator="[
							'external_url',
							{ rules: [{ required: true, message: '请输入落地页链接' }],initialValue:externalurl.url }
							]" style="width:400px;" placeholder="请输入链接，可使用橙子建站提供的链接或第三方链接">
							</a-input-search>
							<a-button slot="enterButton" style="color:#2F88FF" :loading="ldyloading" @click="onuseldy">
								使用已有
							</a-button>
							</div>
						</a-form-item>
							<div class="mfont" v-if="externalurl.url !='' && externalurl.url !=undefined">
								<div style="display:inline-block;"><img :src="externalurl.thumbnail" style="width:50px;height:86px;" alt=""></div>
								<div style="display:inline-block;margin-left:10px;">
									<p><a :href="externalurl.url" target="_blank">{{externalurl.name}}</a></p>
									<p>ID:{{externalurl.siteId}}</p>
								</div>
							</div>
					</div>

						<a-form-item :required="true"  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
							<span slot="label">
								转化类型&nbsp;
								<a-tooltip title="What do you want others to call you?">
								<a-icon type="question-circle-o" />
								</a-tooltip>
							</span>
							<a-button style="margin-left:10px;" @click="onexternaltype" type="primary">转化类型</a-button>
						</a-form-item>

						<div v-show="externaltype" style="width:500px;border:1px solid #ccc;padding:10px;" class="mfont">
							<!-- <a-list item-layout="horizontal">
								<a-list-item slot="renderItem"> -->
									<a-radio-group  :buttonStyle="solid">
										<a-radio :style="radioStyle" value="AD_CONVERT_TYPE_INTERACTION">
											互动
										</a-radio><br />
										<a-radio :style="radioStyle" value="AD_CONVERT_TYPE_FOLLOW_ACTION">
											账号关注
										</a-radio><br />
										<a-radio :style="radioStyle" value="AD_CONVERT_TYPE_COMMENT_ACTION">
											视频评论
										</a-radio><br />
										<a-radio :style="radioStyle" value="AD_CONVERT_TYPE_SHARE_ACTION">
											分享
										</a-radio><br />
										<a-radio :style="radioStyle" value="AD_CONVERT_TYPE_CLICK_LANDING_PAGE">
											访问推广详情页
										</a-radio><br />
										<a-radio :style="radioStyle" value="AD_CONVERT_TYPE_MESSAGE_ACTION">
											私信消息
										</a-radio><br />
										<a-radio :style="radioStyle" value="AD_CONVERT_TYPE_LIVE_ENTER_ACTION">
											直播间观看
										</a-radio><br />
										<a-radio :style="radioStyle" value="AD_CONVERT_TYPE_LIVE_STAY_TIME">
											直播间停留
										</a-radio><br />
										<a-radio :style="radioStyle" value="AD_CONVERT_TYPE_LIVE_CLICK_PRODUCT_ACTION">
											直播间查看商品
										</a-radio><br />
										<a-radio :style="radioStyle" value="AD_CONVERT_TYPE_LIVE_GIFT_ACTION">
											直播间打赏
										</a-radio><br />
										<a-radio :style="radioStyle" value="AD_CONVERT_TYPE_NEW_FOLLOW_ACTION">
											粉丝增长
										</a-radio>
									</a-radio-group>
								<!-- </a-list-item>
							</a-list> -->
						</div>

						<a-form-item :labelCol="{span: 2}"
									:wrapperCol="{span: 200}">
						<span slot="label">
							直达链接&nbsp;
							<a-tooltip title="What do you want others to call you?">
							<a-icon type="question-circle-o" />
							</a-tooltip>
						</span>
						<div class="form-row">
						<a-input v-decorator="[
						'open_url',
						{ rules: [{ message: '' }] }
						]" style="width:400px;margin-left:10px;" placeholder="" />
						</div>
					</a-form-item>
				</div>
			</div>

			<a-divider />

			<div class="code-box-demos" id="Ad-dstion">
				<div class="ad-row-title">
					用户定向<span class="">了解详情</span>
				</div>
				<p style="margin-top:10px;color:#2F88FF"><a-icon type="copy" />复制已有定向</p>
				<div class="ad-group" style="position:relative;">
					<a-tabs default-active-key="1" @change="callback">
						<!-- 新建定向 -->
						<a-tab-pane key="1" tab="新建定向">
							<a-form-item  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
								<span slot="label">
									地域&nbsp;
									<a-tooltip title="What do you want others to call you?">
									<a-icon type="question-circle-o" />
									</a-tooltip>
								</span>
								<a-radio-group v-decorator="[
								'district',
								{ rules:[],initialValue: 'NONE'}
								]"
							@change="ondistrict" button-style="solid">
									<a-radio-button value="NONE">
										不限
									</a-radio-button>
									<a-radio-button value="CITY">
										省市
									</a-radio-button>
									<a-radio-button value="COUNTY">
										区县
									</a-radio-button>
									<!-- <a-radio-button value="BUSINESS_DISTRICT">
										商圈
									</a-radio-button> -->
								</a-radio-group>
							</a-form-item>

							<!-- {{citylist}} -->

							<!-- 按省 -->
							<div style="width:500px;margin-left:100px;" :class="[district =='CITY' ? 'isblock' : 'isnone']">
									<div class="linkage">
										<a-table :row-selection="rowSelectiondatas" style="display:inline-block;" :customRow="customRow" :style="{width:pixel}" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="columnscity" :dataSource="treeData">
											<a slot="name" slot-scope="text">
												{{text.name}}
											<span style="float:right;"><a-icon type="right" /></span>
											</a>
										</a-table>
										<div v-show="sontable" style="display:inline-block;">
											<a-table :row-selection="sonrowSelection" :rowKey="id" :customRow="customRow" style="display:inline-block;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="soncolumns" :dataSource="sontreeData">
												<a slot="name" slot-scope="text">{{ text }}</a>
											</a-table>
										</div>
									</div>
								<div>
									<a-radio-group v-decorator="[
									'location_type',
									{ rules:[],initialValue: 'CURRENT'}
									]" default-value="CURRENT" @change="onlocation">
										<a-radio value="CURRENT">
											正在该地区的用户
										</a-radio>
										<a-radio value="HOME">
											居住在该地区的用户
										</a-radio>
										<a-radio value="TRAVEL">
											到该地区旅行的用户
										</a-radio>
										<a-radio value="ALL">
											该地区内的所有用户
										</a-radio>
									</a-radio-group>
								</div>
							</div>

							<!-- 按市 -->
							<div style="width:800px;margin-left:100px;" :class="[district =='COUNTY' ? 'isblock' : 'isnone']">

								<!-- <a-input-search placeholder="省市搜索不支持按拼音、拼音首字母" enter-button="搜索" @search="onSearchcity" /> -->
								<div class="byted-select-panel-moduler">
									<div class="byted-select-panel-moduler-header">
										<span class="byted-select-panel-moduler-header-title">省份</span>
									</div>
									<div class="listbox">
										<a-list item-layout="horizontal" :data-source="province" >
											<a-list-item slot="renderItem" slot-scope="item" style="cursor:pointer;" @click="onprovince(item.id)">
												{{item.name}}
												<span style="float:right;"><a-icon type="right" /></span>
											</a-list-item>
										</a-list>
									</div>
								</div>

								<a-divider type="vertical" />
								<div class="byted-select-panel-moduler" v-if="city.length > 0">
									<div class="byted-select-panel-moduler-header">
										<span class="byted-select-panel-moduler-header-title">城市</span>
									</div>
									<div class="listbox">
										<a-list item-layout="horizontal" :data-source="city">
											<a-list-item slot="renderItem" slot-scope="item" style="cursor:pointer;" @click="oncity(item.id)">
												{{item.name}}
												<span style="float:right;"><a-icon type="right" /></span>
											</a-list-item>
										</a-list>
									</div>
								</div>
								
								<!-- 区县 -->
								<a-divider type="vertical" />
								<div class="byted-select-panel-moduler" v-if="county.length > 0">
									<div class="byted-select-panel-moduler-header">
										<span class="byted-select-panel-moduler-header-title">县区</span>
									</div>
									<div class="listbox">
										<a-checkbox :checked="is_checkedcity" @change="onallchecked">全选</a-checkbox>
										<div v-for="(item,index) in county" :key="index" style="line-height:30px;">
											<a-checkbox :checked="item.is_checked" @click="oncountyoff(index,item.id)">
												{{item.name}}
											</a-checkbox>
										</div>
									</div>
								</div>
								
								<a-divider type="vertical" />
								<!-- 区县已选 -->
								<div class="byted-select-panel-moduler">
									<div class="byted-select-panel-moduler-header">
										<span class="byted-select-panel-moduler-header-title">已选</span>
									</div>
									<div class="listbox">
										<div v-for="(item,index) in countylist" :key="index" style="line-height:30px;">
											<span>
												{{item.name}}
												<a style="float:right;" @click="oncountydel(item.id)"><a-icon type="delete" /></a>
											</span>
										</div>
									</div>
								</div>

							<div>
									<a-radio-group v-decorator="[
								'location_type',
								{ rules:[],initialValue: 'CURRENT'}
								]" default-value="CURRENT" @change="onlocation">
										<a-radio value="CURRENT">
											正在该地区的用户
										</a-radio>
										<a-radio value="HOME">
											居住在该地区的用户
										</a-radio>
										<a-radio value="TRAVEL">
											到该地区旅行的用户
										</a-radio>
										<a-radio value="ALL">
											该地区内的所有用户
										</a-radio>
									</a-radio-group>
								</div>
							</div>

							<a-form-item  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
								<span slot="label">
									性别&nbsp;
									<a-tooltip title="What do you want others to call you?">
									<a-icon type="question-circle-o" />
									</a-tooltip>
								</span>
								<a-radio-group v-decorator="[
								'gender',
								{ rules:[],initialValue: 'NONE'}
								]"
							@change="ongender" button-style="solid">
								
									<a-radio-button value="NONE">
										不限
									</a-radio-button>
									<a-radio-button value="GENDER_MALE">
										男
									</a-radio-button>
									<a-radio-button value="GENDER_FEMALE">
										女
									</a-radio-button>
								</a-radio-group>
							</a-form-item>

							<a-form-item  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
								<span slot="label">
									年龄&nbsp;
									<a-tooltip title="What do you want others to call you?">
									<a-icon type="question-circle-o" />
									</a-tooltip>
								</span>
								<div class="label" id="label">
									<a-button @click="onlabel" :type="[agearr.length <= 0 ?'primary' : '']" >不限</a-button>
									<a-button @click="label1" :type="label.label1 ? 'primary' : ''">18-23</a-button>
									<a-button @click="label2" :type="label.label2 ? 'primary' : ''">24-30</a-button>
									<a-button @click="label3" :type="label.label3 ? 'primary' : ''">31-40</a-button>
									<a-button @click="label4" :type="label.label4 ? 'primary' : ''">41-49</a-button>
									<a-button @click="label5" :type="label.label5 ? 'primary' : ''">50+</a-button>
								</div>
							</a-form-item>

							<a-form-item  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
								<span slot="label">
									自定义人群&nbsp;
									<a-tooltip title="What do you want others to call you?">
									<a-icon type="question-circle-o" />
									</a-tooltip>
								</span>
								<a-radio-group v-decorator="[
								'retargetings',
								{ rules:[],initialValue: 'NONE'}
								]"
							@change="onretargeting" button-style="solid">
									<a-radio-button value="NONE">
										不限
									</a-radio-button>
									<a-radio-button value="RETARGETINGTAGS">
										自定义人群
									</a-radio-button>
								</a-radio-group>
							</a-form-item>
							<!-- 定向 -->
							<div :class="[retargeting == 'RETARGETINGTAGS' ? 'isblock' : 'isnone']">
									<a-form-item  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
										<span slot="label">
											定向逻辑&nbsp;
											<a-tooltip title="What do you want others to call you?">
											<a-icon type="question-circle-o" />
											</a-tooltip>
										</span>
										<a-radio-group default-value="retargeting_tags_include" v-decorator="[
											'retargeting',
											{ rules:[],initialValue: 'retargeting_tags_include'}
											]"
										@change="onretargetingtags" button-style="solid">
											<a-radio-button value="retargeting_tags_include">
												定向
											</a-radio-button>
											<a-radio-button value="retargeting_tags_exclude">
												排除
											</a-radio-button>
										</a-radio-group>
									</a-form-item>
									
									<div class="mfont" :class="[retargeting_tags =='retargeting_tags_include' ?'isblock':'isnone']">
										<a-input-search
											style="width:500px;"
											placeholder="请输入人群包名称或ID"
											enter-button="搜索"
											@search="ondmp"
											/>
										<a-table :row-selection="rowSelection" style="width:500px;" :columns="columns" :data-source="tagslist">
											<a slot="name" slot-scope="text">{{ text }}</a>
										</a-table>
										
										<p><a-icon type="info-circle" />第三方人群运算受到限制，部分场景无法选择<a-tooltip title="第三方人群包限制如下
	1. 不支持排除第三方人群包；
	2. 不支持同时使用多个来源的第三方人群包">
										<a-icon type="question-circle-o" />
										</a-tooltip></p>
										<p style="color:#2F88FF;cursor:pointer">
											管理自定义人群包<a-icon type="form" />
										</p>
									</div>

									<div class="mfont" :class="[retargeting_tags =='retargeting_tags_exclude' ?'isblock':'isnone']">
										<a-input-search
										style="width:500px;"
											placeholder="请输入人群包名称或ID"
											enter-button="搜索"
											@search="ondmp"
											/>
										<a-table :row-selection="rowSelections" style="width:500px;" :columns="columns" :data-source="tagslist">
											<a slot="name" slot-scope="text">{{ text }}</a>
										</a-table>
										
										<p><a-icon type="info-circle" />第三方人群运算受到限制，部分场景无法选择<a-tooltip title="第三方人群包限制如下
	1. 不支持排除第三方人群包；
	2. 不支持同时使用多个来源的第三方人群包">
										<a-icon type="question-circle-o" />
										</a-tooltip></p>
										<p style="color:#2F88FF;cursor:pointer">
											管理自定义人群包<a-icon type="form" />
										</p>
									</div>
							</div>

							<a-form-item
								:label="$t('行为兴趣')"
								:labelCol="{span: 2}"
								:wrapperCol="{span: 200}"
							>
							<a-radio-group v-decorator="[
											'interest_action_mode',
											{ rules:[],initialValue: 'UNLIMITED'}
											]"
										@change="oninterest" button-style="solid">
								<a-radio-button value="UNLIMITED">
									不限
								</a-radio-button>
								<a-radio-button value="RECOMMEND">
									系统推荐<a-icon type="question-circle-o" />
								</a-radio-button>
								<a-radio-button value="CUSTOM">
									自定义
								</a-radio-button>
							</a-radio-group>
							</a-form-item>

							<!-- 行为兴趣 -->
							<div :class="[interest =='CUSTOM' ?'isblock':'isnone']">
								<p class="pfont" style="margin-left:100px;">选择有以下行为特征或兴趣特征的用户<span class="spanfont">了解详情</span></p>
								<!-- 行为 -->
								<a-form-item :labelCol="{span: 2}" :wrapperCol="{span: 200}">
									<span slot="label">
										行为&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>
									<div style="width:750px; display:inline-block;">
										<div>
											在
											<a-select placeholder="所有行为场景" style="width: 200px" v-decorator="[
											'action_scene',
											{ rules:[],initialValue: ''}
											]" @change="onscene">
												<a-select-option value="E-COMMERCE">
													电商互动行为
												</a-select-option>
												<a-select-option value="NEWS">
													资讯互动行为
												</a-select-option>
												<a-select-option value="APP">
													APP推广互动行为
												</a-select-option>
											</a-select>
											中，选择用户
											<a-select  style="width: 100px" v-decorator="[
											'action_days',
											{ rules:[],initialValue: action_days}
											]" @change="ondays">
												<a-select-option value="7">
													7天
												</a-select-option>
												<a-select-option value="15">
													15天
												</a-select-option>
												<a-select-option value="30">
													30天
												</a-select-option>
												<a-select-option value="60">
													60天
												</a-select-option>
												<a-select-option value="90">
													90天
												</a-select-option>
												<a-select-option value="180">
													180天
												</a-select-option>
												<a-select-option value="365">
													365天
												</a-select-option>
											</a-select>
											内发生的行为:
										</div>
										<div>
											
										<!-- <div class="certain-category-search-wrapper" style="width: 250px"> -->
											<!-- <a-auto-complete
											class="certain-category-search"
											dropdown-class-name="certain-category-search-dropdown"
											:dropdown-match-select-width="false"
											:dropdown-style="{ width: '400px' }"
											style="width: 100%"
											placeholder="请输入类目词或关键词"
											option-label-prop="value"
											@search="oncategoriesword"
											>
											<template slot="dataSource">
												<a-select-option v-for="(opt,index) in datakeyword" :key="index">
													<div style="display:inline-block;">
														{{opt.name}}
														<p class="certain-search-item-count" style="line-height: 22px;font-size: 14px;color: #999;">覆盖数{{opt.num}}</p>
													</div>
													<div style="float:right;display:inline-block;line-height:30px;">
														<span @click="addkeys(opt)">添加</span>
														<a style="margin-left:15px;">查关键词</a>
													</div>
												</a-select-option>
											</template>
											<a-input>
												<a-icon slot="suffix" type="search" class="certain-category-icon" />
											</a-input>
											</a-auto-complete> -->
										<!-- </div> -->
											<a-input-search placeholder="请输入类目词或关键词" style="width: 400px" @search="oncategoriesword" /><span class="spanfont"><a-icon type="check-square" style="margin-left:20px;" />批量添加</span>
											
											<a-tabs :defaultActiveKey="action_key" @change="onaction">
												<a-tab-pane key="action_categories" tab="类目词">
													<div class="content">
								
														<div class="content">
															<div class="text">
																<div @click="allClick1()"  style="display: flex; margin: 5px;" >
																	<div class="checkbox">
																		<img :src="imgurl('trueimg.png')" class="trueimg" v-if="is_checked_1" mode="scaleToFill" >	
																	</div>
																	<span class="checkbox-text">全选</span>
																</div>

																<div v-for="(item,index) in categorieslist" :key="index">
																	<div style="display: flex; margin: 5px;">
																		<div class="checkbox" @click="checked1(index,item.id)">
																		<img :src="imgurl('trueimg.png')" class="trueimg" v-if="item.is_checked" mode="scaleToFill" >	
																		</div>
																		<span class="checkbox-text" @click="handleChange1(index,item.id)">{{item.name}}</span>
																	</div>
																</div>
															</div>

															<div class="text" >
																<div @click="allClick2()"  style="display: flex; margin: 5px;" v-if="arr2.length != 0">
																	<div class="checkbox">
																	<img :src="imgurl('trueimg.png')" class="trueimg" v-if="is_checked_2" mode="scaleToFill" >	
																	</div>
																	<span class="checkbox-text">全选</span>
																</div>
																<div v-for="(item,index) in arr2"  :key="index">
																	<div style="display: flex; margin: 5px;">
																		<div class="checkbox" @click="checked2(index,item.id)">
																		<img :src="imgurl('trueimg.png')" class="trueimg" v-if="item.is_checked" mode="scaleToFill" >	
																		</div>
																		<span class="checkbox-text" @click="handleChange2(index,item.id)">{{item.name}}</span>
																	</div>

																</div>
															</div>
															
															<div class="text" >
																<div @click="allClick3()"  style="display: flex; margin: 5px;" v-if="arr3.length != 0">
																	<div class="checkbox">
																	<img :src="imgurl('trueimg.png')" class="trueimg" v-if="is_checked_3" mode="scaleToFill" >	
																	</div>
																	<span class="checkbox-text">全选</span>
																</div>
																<div v-for="(item,index) in arr3"  :key="index">
																	<div style="display: flex; margin: 5px;">
																		<div class="checkbox" @click="checked3(index,item.id)">
																		<img :src="imgurl('trueimg.png')" class="trueimg" v-if="item.is_checked" mode="scaleToFill" >	
																		</div>
																		<span class="checkbox-text" >{{item.name}}</span>
																	</div>
																	
																</div>
															</div>
														</div>

														<div class="content2">
															<div class="title">
																<h3>还可以添加行为：{{350 - titleArr.length}}个</h3>
																<p style="margin-bottom:0px;"><span>类目词：{{catewords.length}}</span><span style="margin-left:20px;">关键词：{{datakeyword.length}}</span></p>
																<div>
																	<a-row>
																		<a-col :span="8" style="font-size:14px;color:#333;">
																			全部
																		</a-col>
																		<a-col :span="8" style="font-size:14px;color:#333;">
																			覆盖数
																		</a-col>
																		<a-col :span="8">
																			
																		</a-col>
																	</a-row>
																</div>
															</div>
															<a-empty style="padding-top:20px;" v-if="titleArr.length <=0" />
															<div style="padding:10px;">
																<div v-for="(item,index) in titleArr" :key="index">
																	<a-row style="padding:0;">
																		<a-col :span="8">
																			{{item.name}}
																		</a-col>
																		<a-col :span="8">
																			{{item.num}}
																		</a-col>
																		<a-col :span="8" >
																			<span style="font-size:16px;">
																				<a-space>
																					<a @click="querykeys(item.name)"><a-icon type="search" /></a>
																					<a @click="onwords(index)"><a-icon type="delete" /></a>
																				</a-space>
																			</span>
																		</a-col>
																	</a-row>
																</div>
															</div>
														</div>
													</div>
												</a-tab-pane>
												<a-tab-pane key="action_words" tab="关键词">
													
													<div class="content">
														<div class="text" style="width:400px;">
															<div class="crumbs-tips" style="float:right;font-size:12px;text-align:right;">根据关键词推荐的相关词</div>
															<a-empty style="padding-top:20px;" v-if="keyswordlist.length <=0" />
															<div v-for="(item,index) in keyswordlist" :key="index">
																<a-col :span="8" style="font-size:14px;padding:5px;">
																	{{item.name}}
																</a-col>
																<a-col :span="8" style="font-size:14px;padding:5px;">
																	{{item.num}}
																</a-col>
																<a-col :span="8" style="font-size:14px;padding:5px;">
																	<a @click="addkeys(item)">添加</a>
																	<a style="margin-left:20px;" @click="querykeys(item.name)">查关键词</a>
																</a-col>
															</div>
														</div>

														<div class="content2">
															<div class="title">
																<h3>还可以添加行为：{{350 - titleArr.length}}个</h3>
																<p style="margin-bottom:0px;"><span>类目词：{{catewords.length}}</span><span style="margin-left:20px;">关键词：{{datakeyword.length}}</span></p>
																<div>
																	<a-row>
																		<a-col :span="8" style="font-size:14px;color:#333;">
																			全部
																		</a-col>
																		<a-col :span="8" style="font-size:14px;color:#333;">
																			覆盖数
																		</a-col>
																		<a-col :span="8">
																			
																		</a-col>
																	</a-row>
																</div>
															</div>

															<a-empty style="padding-top:20px;" v-if="titleArr.length <=0" />
															<div style="padding:10px;">
																<div v-for="(item,index) in titleArr" :key="index">
																	<a-row style="padding:0;">
																		<a-col :span="8">
																			{{item.name}}
																		</a-col>
																		<a-col :span="8">
																			{{item.num}}
																		</a-col>
																		<a-col :span="8" >
																			<span style="font-size:16px;">
																				<a-space>
																					<a @click="querykeys(item.name)"><a-icon type="search" /></a>
																					<a @click="onwords(index,item.id)"><a-icon type="delete" /></a>
																				</a-space>
																			</span>
																		</a-col>
																	</a-row>
																</div>
															</div>

														</div>
													</div>
												</a-tab-pane>
											</a-tabs>

										</div>
									</div>
								</a-form-item>
								
								<!-- 兴趣 -->
								<a-form-item  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
									<span slot="label">
										兴趣&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>
									<div style="width:750px; display:inline-block;">
										<div>
											
										<!-- <div class="certain-category-search-wrapper" style="width: 250px"> -->
											<!-- <a-auto-complete
											class="certain-category-search"
											dropdown-class-name="certain-category-search-dropdown"
											:dropdown-match-select-width="false"
											:dropdown-style="{ width: '400px' }"
											style="width: 100%"
											placeholder="请输入类目词或关键词"
											option-label-prop="value"
											@search="oncategoriesword"
											>
											<template slot="dataSource">
												<a-select-option v-for="(opt,index) in datakeyword" :key="index">
													<div style="display:inline-block;">
														{{opt.name}}
														<p class="certain-search-item-count" style="line-height: 22px;font-size: 14px;color: #999;">覆盖数{{opt.num}}</p>
													</div>
													<div style="float:right;display:inline-block;line-height:30px;">
														<span @click="addkeys(opt)">添加</span>
														<a style="margin-left:15px;">查关键词</a>
													</div>
												</a-select-option>
											</template>
											<a-input>
												<a-icon slot="suffix" type="search" class="certain-category-icon" />
											</a-input>
											</a-auto-complete> -->
										<!-- </div> -->
											<a-input-search placeholder="请输入类目词或关键词" style="width: 400px" @search="oninterestword" /><span class="spanfont"><a-icon type="check-square" style="margin-left:20px;" />批量添加</span>
											
											<a-tabs :defaultActiveKey="actionkey" @change="oninterestkey">
												<a-tab-pane key="interest_categories" tab="类目词">
													<div class="content">
														
														<div class="text">
															<div @click="onarr1()">
																<a-checkbox :checked="is_checked_s1"><span>全选</span></a-checkbox>
															</div>
															<div v-for="(item,index) in interestlist" :key="index">
																<div>
																	<a-checkbox :checked="item.is_checked" @click="checkeds1(index,item.id)"><span @click="handleChanges1(index)">{{item.name}}</span></a-checkbox>
																	<span style="float:right;font-size:14px;line-height:30px;color:rgba(0, 0, 0, 0.65)"><a-icon type="right" /></span>
																</div>
															</div>
														</div>

														<div class="text" v-if="array2.length >0">
															<div @click="onarr2()" v-if="array2.length != 0">
																<a-checkbox :checked="is_checked_s2"><span>全选</span></a-checkbox>
															</div>
															<div v-for="(item,index) in array2" :key="index">
																<div>
																	<a-checkbox :checked="item.is_checked" @click="checkeds2(index,item.id)"><span  @click="handleChanges2(index)">{{item.name}}</span></a-checkbox>
																	<span style="float:right;font-size:14px;line-height:30px;color:rgba(0, 0, 0, 0.65)"><a-icon type="right" /></span>
																</div>
															</div>
														</div>

														<div class="text" v-if="array3.length >0">
															<div @click="onarr3()" v-if="array3.length != 0">
																<a-checkbox :checked="is_checked_s3"><span>全选</span></a-checkbox>
															</div>
															<div v-for="(item,index) in array3" :key="index" >
																<div @click="handleChanges3(index)">
																	<a-checkbox :checked="item.is_checked" @click="checkeds3(index,item.id)"><span  @click="handleChanges2(index)">{{item.name}}</span></a-checkbox>
																</div>
															</div>
														</div>

														<div class="content2">
															<div class="title">
																<h3>还可以添加行为：{{350 - titleArray.length}}个</h3>
																<p style="margin-bottom:0px;"><span>类目词：{{titleArray.length}}</span><span style="margin-left:20px;">关键词：0</span></p>
																<div>
																	<a-row>
																		<a-col :span="8" style="font-size:14px;color:#333;">
																			全部
																		</a-col>
																		<a-col :span="8" style="font-size:14px;color:#333;">
																			覆盖数
																		</a-col>
																		<a-col :span="8">
																			
																		</a-col>
																	</a-row>
																</div>
															</div>
															<a-empty style="padding-top:20px;" v-if="titleArray.length <=0" />
															<div style="padding:10px;">
																<div v-for="(item,index) in titleArray" :key="index">
																	<a-row style="padding:0;">
																		<a-col :span="8">
																			{{item.name}}
																		</a-col>
																		<a-col :span="8">
																			{{item.num}}
																		</a-col>
																		<a-col :span="8" >
																			<span style="font-size:16px;">
																				<a-space>
																					<a @click="querykeywork(item.name)"><a-icon type="search" /></a>
																					<a @click="onkeywords(index,item.id)"><a-icon type="delete" /></a>
																				</a-space>
																			</span>
																		</a-col>
																	</a-row>
																</div>
															</div>
														</div>
													</div>
												</a-tab-pane>
												<a-tab-pane key="interest_words" tab="关键词">
													
													<div class="content">
														<div class="text" style="width:400px;">
															<div class="crumbs-tips" style="float:right;font-size:12px;text-align:right;">根据关键词推荐的相关词</div>
															<a-empty style="padding-top:20px;" v-if="interestkeyword.length <=0" />
															<div v-for="(item,index) in interestkeyword" :key="index">
																<a-col :span="8" style="font-size:14px;padding:5px;">
																	{{item.name}}
																</a-col>
																<a-col :span="8" style="font-size:14px;padding:5px;">
																	{{item.num}}
																</a-col>
																<a-col :span="8" style="font-size:14px;padding:5px;">
																	<a @click="onaddkeys(item)">添加</a>
																	<a style="margin-left:20px;" @click="querykeywork(item.name)">查关键词</a>
																</a-col>
															</div>
														</div>

														<div class="content2">
															<div class="title">
																<h3>还可以添加行为：{{350 - titleArray.length}}个</h3>
																<p style="margin-bottom:0px;"><span>类目词：{{catewordslist.length}}</span><span style="margin-left:20px;">关键词：{{datakey.length}}</span></p>
																<div>
																	<a-row>
																		<a-col :span="8" style="font-size:14px;color:#333;">
																			全部
																		</a-col>
																		<a-col :span="8" style="font-size:14px;color:#333;">
																			覆盖数
																		</a-col>
																		<a-col :span="8">
																			
																		</a-col>
																	</a-row>
																</div>
															</div>

															<a-empty style="padding-top:20px;" v-if="titleArray.length <=0" />
															<div style="padding:10px;">
																<div v-for="(item,index) in titleArray" :key="index">
																	<a-row style="padding:0;">
																		<a-col :span="8">
																			{{item.name}}
																		</a-col>
																		<a-col :span="8">
																			{{item.num}}
																		</a-col>
																		<a-col :span="8" >
																			<span style="font-size:16px;">
																				<a-space>
																					<a @click="querykeywork(item.name)"><a-icon type="search" /></a>
																					<a @click="onkeywords(index,item.id)"><a-icon type="delete" /></a>
																				</a-space>
																			</span>
																		</a-col>
																	</a-row>
																</div>
															</div>

														</div>
													</div>
												</a-tab-pane>
											</a-tabs>

										</div>
									</div>
								</a-form-item>
							</div>


							<!-- 抖音达人 -->
							<a-form-item :label="$t('抖音达人')" :labelCol="{span: 2}" :wrapperCol="{span: 200}" >
								<a-radio-group v-decorator="[
									'aa',
											{ rules:[],initialValue: 'NONE'}
											]"
										@change="ontiktok" button-style="solid">
									<a-radio-button value="NONE">
										不限
									</a-radio-button>
									<a-radio-button value="RECOMMEND">
										自定义
									</a-radio-button>
								</a-radio-group>
							</a-form-item>

							<div :class="[tiktok =='RECOMMEND' ? 'isblock':'isnone']" style="margin-left:100px;">
								<p class="pfont">通过选择抖音达人或达人所在分类，定向对这些内容感兴趣的用户<span class="spanfont">了解详情</span></p>
								<div>
									定向与以下达人产生
									<a-select  style="width: 200px" v-decorator="[
									'aweme_fan_behaviors',
											{ rules:[],initialValue: 'FOLLOWED_USER'}
											]" default-value="FOLLOWED_USER" @change="onbehaviors">
										<a-select-option value="FOLLOWED_USER">
											已关注用户
										</a-select-option>
										<a-select-option value="COMMENTED_USER">
											视频互动-已评论用户
										</a-select-option>
										<a-select-option value="LIKED_USER">
											视频互动-已点赞用户
										</a-select-option>
										<a-select-option value="SHARED_USER">
												视频互动-已分享用户
										</a-select-option>
									</a-select>
									互动的用户
								</div>
								
								<div>
									<p><a-input-search placeholder="支持搜索抖音达人、抖音昵称或抖音达人所在分类" style="width: 400px" @search="ontiktokkey" /></p>
									<a-table :row-selection="rowtiktoktalent" style="display:inline-block;" :scroll="{ x: 300, y: 300 }" :pagination="pages" :columns="talentcolumns" :data-source="tiktoktalent">
										<a slot="name" style="width:200px;" slot-scope="text">
											{{text.value}} 
											<p style="margin:0;line-height:20px;font-size:12px;">粉丝数量：{{text.fans_num_str}}</p>
											<a-icon type="right" v-if="text.son.length >0" style="float:right;" />
										</a>
									</a-table>
									<div style="display:inline-block;margin-left:15px;" v-if="sontiktoktalent.length >0">
										<a-table :row-selection="rowsontiktoktalent" style="display:inline-block;" :scroll="{ x: 300, y: 300 }" :pagination="pages" :columns="sontalentcolumns" :data-source="sontiktoktalent">
											<a slot="name" slot-scope="text">
												{{text.value}}
												<p style="margin:0;line-height:20px;font-size:12px;">粉丝数量：{{text.fans_num_str}}</p>
												<a-icon type="right" v-if="text.son.length >0" style="float:right;" />
											</a>
										</a-table>
									</div>

									<div style="display:inline-block;margin-left:15px;" v-if="threetiktoktalent.length >0">
										<a-table :row-selection="rowthreetiktoktalent" style="display:inline-block;" :scroll="{ x: 300, y: 300 }" :pagination="pages" :columns="threetalentcolumns" :data-source="threetiktoktalent">
											<a slot="name" slot-scope="text">
												{{text.value}}
												<p style="margin:0;line-height:20px;font-size:12px;">粉丝数量：{{text.fans_num_str}}</p>
												<a-icon type="right" v-if="text.son.length >0" style="float:right;" />
											</a>
										</a-table>
									</div>

								</div>
							</div>

							<a-form-item
								:label="$t('媒体定向')"
								:labelCol="{span: 2}"
								:wrapperCol="{span: 200}"
							>
								<a-radio-group v-decorator="[
								'superior_popularity_type',
											{ rules:[],initialValue: 'NONE'}
											]"
										@change="onsuperior" button-style="solid">
									<a-radio-button value="NONE">
										不限
									</a-radio-button>
									<a-radio-button value="GAME" :disabled="dis">
										游戏优质媒体
									</a-radio-button>
									<a-radio-button value="RECOMMEND">
										自定义
									</a-radio-button>
								</a-radio-group>
									<p class="mfont"><a-icon type="info-circle" />媒体包仅支持穿山甲、穿山甲-精选游戏广告位</p>
							</a-form-item>

								<!-- 媒体定向  -->
								<div :class="[superior == 'RECOMMEND' ? 'isblock' : 'isnone']">
									<a-form-item  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
										<span slot="label">
											定向逻辑&nbsp;
											<a-tooltip title="What do you want others to call you?">
											<a-icon type="question-circle-o" />
											</a-tooltip>
										</span>
										<a-radio-group default-value="flow_package" button-style="solid">
											<a-radio-button value="flow_package">
												定向
											</a-radio-button>
											<a-radio-button value="exclude_flow_package">
												排除
											</a-radio-button>
										</a-radio-group>
									</a-form-item>
									
									<div :class="[packages =='flow_package' ?'isblock':'isnone']" class="mfont">
										<a-input-search
											style="width:500px;"
											placeholder="请输入媒体包名称或ID"
											enter-button="搜索"
											@search="onpackage"
											/>
										<a-table :row-selection="rowpackage" style="width:500px;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="packagelabel" :data-source="packagelist">
											<a slot="name" slot-scope="text">{{ text }}</a>
										</a-table>
										<p style="color:#2F88FF;cursor:pointer">
											管理自定义人群包<a-icon type="form" />
										</p>
									</div>

									<div :class="[packages =='exclude_flow_package' ?'isblock':'isnone']" class="mfont">
										<a-input-search
											style="width:500px;"
											placeholder="请输入媒体包名称或ID"
											enter-button="搜索"
											@search="onpackage"
											/>
										<a-table :row-selection="rowpackages" style="width:500px;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="packagelabel" :data-source="packagelist">
											<a slot="name" slot-scope="text">{{ text }}</a>
										</a-table>
										<p style="color:#2F88FF;cursor:pointer">
											管理自定义人群包<a-icon type="form" />
										</p>
									</div>
								</div>
							
							<div :class="[landing_type =='AWEME' ?'isblock':'isnone']">
								<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
									<span slot="label">
										过滤高活跃用户&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>

									<a-radio-group v-decorator="[
									'filter_aweme_abnormal_active',
												{ rules:[],initialValue: '0'}
												]"
											@change="onsuperior" button-style="solid">
										<a-radio-button value="0">
											不过滤
										</a-radio-button>
										<a-radio-button value="1">
											过滤
										</a-radio-button>
									</a-radio-group>
								</a-form-item>

								<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
									<span slot="label">
										过滤自己粉丝&nbsp;
									</span>

									<a-radio-group v-decorator="[
									'filter_own_aweme_fans',
												{ rules:[],initialValue: '0'}
												]"
											@change="onsuperior" button-style="solid">
										<a-radio-button value="0">
											不过滤
										</a-radio-button>
										<a-radio-button value="1">
											过滤
										</a-radio-button>
									</a-radio-group>
								</a-form-item>

								<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
									<span slot="label">
										过滤高关注数用户&nbsp;
									</span>
									<a-radio-group v-decorator="[
									'filter_aweme_fans_count',
												{ rules:[],initialValue: '0'}
												]"
											@change="onsuperior" button-style="solid">
										<a-radio-button value="0">
											不过滤
										</a-radio-button>
										<a-radio-button value="1000">
											>1000
										</a-radio-button>
										<a-radio-button value="500">
											>500
										</a-radio-button>
										<a-radio-button value="200">
											>200
										</a-radio-button>
									</a-radio-group>
								</a-form-item>
							</div>

							<a-form-item
								:label="$t('平台')"
								:labelCol="{span: 2}"
								:wrapperCol="{span: 200}"
							>
								<div class="label" id="label">
									<a-button @click="onplatform" :type="[platform.length <=0 ?'primary' : '']" >不限</a-button>
									<a-button @click="android" :type="label.android ? 'primary' : ''">android</a-button>
									<a-button @click="iOS" :type="label.iOS ? 'primary' : ''">iOS</a-button>
									<a-button @click="PC" :type="label.PC ? 'primary' : ''">PC</a-button>
								</div>
							</a-form-item>

							<a-form-item
								:label="$t('网络')"
								:labelCol="{span: 2}"
								:wrapperCol="{span: 200}"
							>
								<div class="label" id="label">
									<a-button @click="onnetworks" :type="[networks.length <=0 ?'primary' : '']" >不限</a-button>
									<a-button @click="wifi" :type="label.wifi ? 'primary' : ''">WIFI</a-button>
									<a-button @click="twog" :type="label.twog ? 'primary' : ''">2G</a-button>
									<a-button @click="threeg" :type="label.threeg ? 'primary' : ''">3G</a-button>
									<a-button @click="forg" :type="label.forg ? 'primary' : ''">4G</a-button>
								</div>
							</a-form-item>

							<a-form-item  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
								<span slot="label">
									已安装用户&nbsp;
									<a-tooltip title="What do you want others to call you?">
									<a-icon type="question-circle-o" />
									</a-tooltip>
								</span>
								<a-radio-group v-decorator="[
								'hide_if_exists',
											{ rules:[],initialValue: '0'}
											]"
										@change="onsuperior" button-style="solid">
									<a-radio-button value="0">
										不限
									</a-radio-button>
									<a-radio-button disabled value="1">
										过滤
									</a-radio-button>
									<a-radio-button value="2">
										定向
									</a-radio-button>
								</a-radio-group>
							</a-form-item>

							<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
								<span slot="label">
									过滤已转化用户&nbsp;
									<a-tooltip title="What do you want others to call you?">
									<a-icon type="question-circle-o" />
									</a-tooltip>
								</span>
								<a-radio-group v-decorator="[
								'hide_if_converted',
											{ rules:[],initialValue: 'NO_EXCLUDE'}
											]"
										@change="onconverted" button-style="solid">
									<a-radio-button value="NO_EXCLUDE">
										不限
									</a-radio-button>
									<a-radio-button value="AD">
										广告计划
									</a-radio-button>
									<a-radio-button value="CAMPAIGN">
										广告组
									</a-radio-button>
									<a-radio-button value="ADVERTISER">
										广告账户
									</a-radio-button>
									<a-radio-button value="APP">
										APP
									</a-radio-button>
									<a-radio-button value="CUSTOMER">
										公司账户
									</a-radio-button>
								</a-radio-group>
								<p style="margin-left:100px;margin-bottom:0;"><a-icon type="info-circle" />过滤已转化不支持投放目标为展示、点击计划，不支持受众预估</p>
							</a-form-item>

							<div v-if="isconverted">
								<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
								<span slot="label">
									过滤时间&nbsp;
									<a-tooltip title="What do you want others to call you?">
									<a-icon type="question-circle-o" />
									</a-tooltip>
								</span>
								<a-radio-group v-decorator="[
								'activate_type',
											{ rules:[],initialValue: 'NO_EXCLUDE'}
											]"
										button-style="solid">
									<a-radio-button value="NO_EXCLUDE">
										不限
									</a-radio-button>
									<a-radio-button value="ONE_MONTH">
										1个月
									</a-radio-button>
									<a-radio-button value="THREE_MONTH">
										3个月
									</a-radio-button>
									<a-radio-button value="SIX_MONTH">
										6个月
									</a-radio-button>
									<a-radio-button value="TWELVE_MONTH">
										12个月
									</a-radio-button>
								</a-radio-group>
								</a-form-item>
							</div>

							<a-collapse accordion style="background:#fff;border:none;padding:0;">
								<a-collapse-panel key="1" header="显示高级选项" style="border:none;color:Red;">

									<a-form-item  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
										<span slot="label">
											文章分类&nbsp;
											<a-tooltip title="What do you want others to call you?">
											<a-icon type="question-circle-o" />
											</a-tooltip>
										</span>

										<a-radio-group default-value="0" @change="onarticle" button-style="solid">
											<a-radio-button value="0">
												不限
											</a-radio-button>
											<a-radio-button value="1">
												文章分类
											</a-radio-button>
										</a-radio-group>
									</a-form-item>

									<div :class="[article ==1 ?'isblock':'isnone']" class="mfont">
										<a-table :row-selection="rowarticle" style="width:500px;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="articlelabel" :data-source="articlelist">
											<a slot="name" slot-scope="text">{{ text }}</a>
										</a-table>
									</div>

										<a-form-item
											:label="$t('运营商')"
											:labelCol="{span: 2}"
											:wrapperCol="{span: 200}"
										>
											<div class="label" id="label">
												<a-button @click="onoperator" :type="[operator !=undefined && operator.length <=0 ?'primary' : '']" >不限</a-button>
												<a-button @click="MOBILE" :type="label.MOBILE ? 'primary' : ''">移动</a-button>
												<a-button @click="UNICOM" :type="label.UNICOM ? 'primary' : ''">联通</a-button>
												<a-button @click="TELCOM" :type="label.TELCOM ? 'primary' : ''">电信</a-button>
											</div>
										</a-form-item>

									<a-form-item  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
										<span slot="label">
											新用户&nbsp;
											<a-tooltip title="What do you want others to call you?">
											<a-icon type="question-circle-o" />
											</a-tooltip>
										</span>
											<div class="label" id="label">
												<a-button @click="onmonthlist" :type="[monthlist !=undefined && monthlist.length <=0 ?'primary' : '']" >不限</a-button>
												<a-button @click="WITH_IN_A_MONTH" :type="label.WITH_IN_A_MONTH ? 'primary' : ''">一个月以内</a-button>
												<a-button @click="ONE_MONTH_2_THREE_MONTH" :type="label.ONE_MONTH_2_THREE_MONTH ? 'primary' : ''">一个月到三个月</a-button>
												<a-button @click="THREE_MONTH_EAILIER" :type="label.THREE_MONTH_EAILIER ? 'primary' : ''">三个月或更早</a-button>
											</div>
									</a-form-item>

									<a-form-item  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
										<span slot="label">
											手机品牌&nbsp;
											<a-tooltip title="What do you want others to call you?">
											<a-icon type="question-circle-o" />
											</a-tooltip>
										</span>
										<a-radio-group default-value="0" @change="onbrand" button-style="solid">
											<a-radio-button value="0">
												不限
											</a-radio-button>
											<a-radio-button value="1">
												按品牌
											</a-radio-button>
										</a-radio-group>
									</a-form-item>

									<div :class="[brand ==1 ?'isblock':'isnone']" class="mfont">
										<a-table :row-selection="rowbrand" style="width:500px;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="brandlabel" :data-source="brandlist">
											<a slot="name" slot-scope="text">{{ text }}</a>
										</a-table>
									</div>

									<a-form-item  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
										<span slot="label">
											手机价格&nbsp;
											<a-tooltip title="What do you want others to call you?">
											<a-icon type="question-circle-o" />
											</a-tooltip>
										</span>
										<a-radio-group default-value="0" @change="onprice" button-style="solid">
											<a-radio-button value="0">
												不限
											</a-radio-button>
											<a-radio-button value="1">
												自定义
											</a-radio-button>
										</a-radio-group>
									</a-form-item>
									
									<div :class="[launchprice ==1 ?'isblock':'isnone']">
										<a-slider :marks="marks" max="11000" range="true"  @afterChange="onAfterChange" :default-value="pricearr" :tipFormatter="null" :step="500" />

										<p class="pfont">快捷方式:
											<span @click="onlaunch(1)" style="margin-left:20px;" class="spanfont">2000元-4000元</span>
											<span @click="onlaunch(2)" style="margin-left:20px;" class="spanfont">4000元-6000元</span>
											<span @click="onlaunch(3)" style="margin-left:20px;" class="spanfont">6000元-8000元</span>
											<span @click="onlaunch(4)" style="margin-left:20px;" class="spanfont">8000元以上</span>
										</p>

									</div>

									<div :class="[brand ==1 ?'isblock':'isnone']" class="mfont">
										<a-table :row-selection="rowbrand" style="width:500px;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="brandlabel" :data-source="brandlist">
											<a slot="name" slot-scope="text">{{ text }}</a>
										</a-table>
									</div>

									<a-form-item  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
										<span slot="label">
											智能放量&nbsp;
											<a-tooltip title="What do you want others to call you?">
											<a-icon type="question-circle-o" />
											</a-tooltip>
										</span>
										<a-radio-group v-decorator="[
								'auto_extend_enabled',
											{ rules:[],initialValue: '0'}
											]"
										@change="onautoextend" button-style="solid">
											<a-radio-button value="0">
												不启用
											</a-radio-button>
											<a-radio-button value="1">
												启用
											</a-radio-button>
										</a-radio-group>
										<p style="margin-left:100px;margin-bottom:0;"><a-icon type="info-circle" />自能放量不支持受众预估</p>
									</a-form-item>

									<div :class="[enableds ==1 ?'isblock':'isnone']" class="mfont">
										<a-table :row-selection="rowenabled" style="width:500px;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="enabledlabel" :data-source="enabledlist">
											<a slot="name" slot-scope="text">{{ text }}</a>
										</a-table>
									</div>

								</a-collapse-panel>
							</a-collapse>

							<a-button size="large" @click="presedirec" :loading="confirmLoading">
								保存为定向包 
							</a-button>
							<a-tooltip title="将以上定向设置保存为定向包，该定向包可直接在其他广告计划中复用">
							<a-icon type="question-circle-o" style="margin-left:10px;" />
							</a-tooltip>
						</a-tab-pane>
						
						<a-tab-pane key="2" tab="选择已有定向" force-render>
							<a-input-search
								style="width:500px;"
								placeholder="选择已有定向包名称"
								enter-button="搜索"
								disabled
								size="large"
								@search="ondmp"
								/>
								<span class="spanfont" style="margin-left:10px;">管理自定义定向包<a-icon type="form" /></span>
							<a-table :row-selection="rowSelection" style="width:500px;" :columns="directional" :data-source="directionallist">
								<a slot="name" slot-scope="text">{{ text }}</a>
							</a-table>
							
							<p><a-icon type="info-circle" />过滤已转化不支持投放目标为展示、点击计划</p>
						</a-tab-pane>
					</a-tabs>
					<!-- 定向信息 -->
						<div class="ad-audience-estimate-wrapper">
							<!-- <div class="ad-audience-estimate-cover">
								<div class="fw-500">预估广告展示数
									<a-tooltip title="根据头条、抖音、西瓜、抖音火山版、穿山甲、穿山甲-精选休闲游戏等广告位展示量计算得出，大于1万时，默认展示最小值">
									<a-icon type="question-circle-o" style="margin-left:10px;" />
									</a-tooltip>
								</div>
								<div class="indicator-wrap">
									<div class="ad-audience-estimate-cover-text">
										今日头条
										<span class="other-covernum bui-num">15.0亿</span>
									</div>
									<div class="ad-audience-estimate-cover-text">
										抖音短视频
										<span class="other-covernum bui-num">30.0亿</span>
									</div>
									<div class="ad-audience-estimate-cover-text">
										西瓜视频
										<span class="other-covernum bui-num">4.0亿</span>
									</div>
									<div class="ad-audience-estimate-cover-text">
										抖音火山版
										<span class="other-covernum bui-num">4.0亿</span>
									</div>
									<div class="ad-audience-estimate-cover-text">
										穿山甲
										<span class="other-covernum bui-num">55.0亿</span>
									</div>
								</div>
							</div> -->
						
								<div class="ad-audience-estimate-cover" style="background:#fff;">
									
									<div class="fw-500">预估用户覆盖数
										<a-tooltip title="根据头条、抖音、西瓜、抖音火山版、穿山甲、穿山甲-精选休闲游戏等广告位展示量计算得出，大于1万时，默认展示最小值">
										<a-icon type="question-circle-o" style="margin-left:10px;" />
										</a-tooltip>
									</div>
									
									<div class="indicator-wrap">
										<div class="ad-audience-estimate-cover-text">
											今日头条
											<span class="other-covernum bui-num">{{tonum(estimate.toutiao.num)}}</span>
										</div>
										<div class="ad-audience-estimate-cover-text">
											抖音短视频
											<span class="other-covernum bui-num">{{tonum(estimate.aweme.num)}}</span>
										</div>
										<div class="ad-audience-estimate-cover-text">
											西瓜视频
											<span class="other-covernum bui-num">{{tonum(estimate.video_app.num)}}</span>
										</div>
										<div class="ad-audience-estimate-cover-text">
											抖音火山版
											<span class="other-covernum bui-num">{{tonum(estimate.hotsoon.num)}}</span>
										</div>
										<!-- <div class="ad-audience-estimate-cover-text">
											穿山甲
											<span class="other-covernum bui-num">1.0亿</span>
										</div> -->
									</div>
									<a-spin size="small" tip="Loading..." :spinning="audienceloading" />

									<div class="ad-audience-estimate-info">
										<p class="ad-audience-estimate-info-name">已选定向信息</p>

										<div class="audience-info" v-if="citylist.length >0">
											<span class="category-label">城市：</span>
											<span class="category-item" v-for="(item,index) in citylist" :key="index">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info" v-if="countylist.length >0">
											<span class="category-label">地域：</span>
											<span class="category-item" v-for="(item,index) in countylist" :key="index">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info" :class="[gender != 'NONE' ? 'isblock':'isnone']">
											<span class="category-label">性别：</span>
											<span class="category-item" v-if="gender =='GENDER_MALE'">男</span>
											<span class="category-item" v-if="gender =='GENDER_FEMALE'">女</span>
										</div>
										<div class="audience-info" :class="[agearr.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">年龄：</span>
											<span class="category-item" v-if="label.label1">18-23、</span>
											<span class="category-item" v-if="label.label2">24-30、</span>
											<span class="category-item" v-if="label.label3">31-40、</span>
											<span class="category-item" v-if="label.label4">41-49、</span>
											<span class="category-item" v-if="label.label5">50+</span>
										</div>
										<div class="audience-info" :class="[selectedRows.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">定向人群包：</span>
											<span class="category-item" v-for="item in selectedRows" :key="item.custom_audience_id">
												{{item.name}}、
											</span>
										</div>
										<div class="audience-info" :class="[selectedRowss.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">排除人群包：</span>
											<span class="category-item" v-for="item in selectedRowss" :key="item.custom_audience_id">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info" :class="[rowpackagelist.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">定向媒体包：</span>
											<span class="category-item" v-for="item in rowpackagelist" :key="item.id">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info" :class="[rowpackagelists.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">排除媒体包：</span>
											<span class="category-item" v-for="item in rowpackagelists" :key="item.id">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info" :class="[catewords.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">行为类目词</span>
											<span class="category-item" v-for="item in catewords" :key="item.id">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info" :class="[datakeyword.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">行为关键词</span>
											<span class="category-item" v-for="item in datakeyword" :key="item.id">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info" :class="[catewordslist.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">兴趣类目词</span>
											<span class="category-item" v-for="item in catewordslist" :key="item.id">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info" :class="[datakey.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">兴趣关键词</span>
											<span class="category-item" v-for="item in datakey" :key="item.id">
												{{item.name}}、
											</span>
										</div>


										<div class="audience-info" :class="[rowtiktoktalentlist.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">抖音号分类：</span>
											<span class="category-item" v-for="item in rowtiktoktalentlist" :key="item.id">
												{{item.value}}、
											</span>
										</div>

										<div class="audience-info" :class="[platform.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">平台：</span>
											<span class="category-item" v-if="label.android">android、</span>
											<span class="category-item" v-if="label.iOS">iOS、</span>
											<span class="category-item" v-if="label.PC">PC、</span>
										</div>
										<div class="audience-info" :class="[networks.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">网络：</span>
											<span class="category-item" v-if="label.wifi">WIFI、</span>
											<span class="category-item" v-if="label.twog">2G、</span>
											<span class="category-item" v-if="label.threeg">3g、</span>
											<span class="category-item" v-if="label.forg">4G、</span>
										</div>

										<div class="audience-info" :class="[rowarticlelist.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">文章分类：</span>
											<span class="category-item" v-for="item in rowarticlelist" :key="item.key">
												{{item.name}}、
											</span>
										</div>
										<div class="audience-info" :class="[operator.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">运行商：</span>
											<span class="category-item" v-if="label.MOBILE">移动、</span>
											<span class="category-item" v-if="label.UNICOM">联通、</span>
											<span class="category-item" v-if="label.TELCOM">电信、</span>
										</div>

										<div class="audience-info" :class="[monthlist.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">新用户：</span>
											<span class="category-item" v-if="label.WITH_IN_A_MONTH">一个月以内、</span>
											<span class="category-item" v-if="label.ONE_MONTH_2_THREE_MONTH">一个月到三个月、</span>
											<span class="category-item" v-if="label.THREE_MONTH_EAILIER">三个月或更早、</span>
										</div>

										<div class="audience-info" :class="[rowbrandlist.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">手机品牌：</span>
											<span class="category-item" v-for="item in rowbrandlist" :key="item.key">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info" :class="[strnum !='' ?'isblock' : 'isnone']">
											<span class="category-label">手机价格：</span>
											<span class="category-item">{{strnum[0]}}以上</span>
										</div>

										<div class="audience-info" :class="[rowenabledlist.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">可放开定向：</span>
											<span class="category-item" v-for="item in rowenabledlist" :key="item.key">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info">
											<span class="category-label">过滤已转化用户：</span>
											<span class="category-item">广告计划</span>
										</div>
										<div class="audience-info">
											<span class="category-label">智能放量：</span>
											<span class="category-item">不开启</span>
										</div>
									</div>
									
								</div>

						</div>
				</div>
			</div>
			<a-divider />

			<div class="code-box-demos" id="Ad-Budget">
				<div class="ad-row-title">
					预算与出价<span class="">了解详情</span>
				</div>
				<div class="ad-group" style="position: relative;">
					<a-form-item
						:label="$t('投放场景')"
						:labelCol="{span: 2}"
						:wrapperCol="{span: 200}"
						
					>
						<div class="scene" @click="onselected('SMART_BID_CUSTOM')" :class="[sceneselect == 'SMART_BID_CUSTOM' ? 'sceneselect' :'']">
							<input type="hidden" name="smart_bid_type" value="SMART_BID_CUSTOM">
							<div class="title">常规投放</div>
							<p>控制成本，尽量消耗完预算</p>
						</div>
						<div class="scene" @click="onselected('SMART_BID_CONSERVATIVE')" :class="[sceneselect == 'SMART_BID_CONSERVATIVE' ? 'sceneselect' :'']">
							<input type="hidden" name="smart_bid_type" value="SMART_BID_CONSERVATIVE">
							<div class="title">放量投放</div>
							<p>接受成本上浮，尽量消耗更多预算</p>
						</div>
					</a-form-item>

					<div :class="[sceneselect =='SMART_BID_CUSTOM'?'isblock':'isnone']">
						<a-form-item :labelCol="{span: 2}" :wrapperCol="{span: 200}">
							<span slot="label">
								优先跑量&nbsp;
							</span>
						
							<a-radio-group v-decorator="[
								'flow_control_mode',
											{ rules:[],initialValue: 'FLOW_CONTROL_MODE_FAST'}
											]"
										@change="onadjust" button-style="solid">
								
								<a-radio-button value="FLOW_CONTROL_MODE_FAST">
									优先跑量 
								</a-radio-button>
								<a-radio-button value="FLOW_CONTROL_MODE_BALANCE">
									均衡投放
								</a-radio-button>
								<a-radio-button value="FLOW_CONTROL_MODE_SMOOTH">
									优先低成本
								</a-radio-button>
							</a-radio-group>
						</a-form-item>
				
						<a-form-item
							:label="$t('预算')"
							:labelCol="{span: 2}"
							:wrapperCol="{span: 200}"
							:required="true"
						>
						<div class="form-row" style="display:inline-block">
							<a-input-group compact>
								<a-select v-decorator="[
								'budget_mode',
											{ rules:[],initialValue: 'BUDGET_MODE_DAY'}
											]" >
									<a-select-option value="BUDGET_MODE_DAY">
									日预算
									</a-select-option>
									<a-select-option value="BUDGET_MODE_TOTAL">
									总预算
									</a-select-option>
								</a-select>
								<a-input-number style="width: 300px" :min="300" :max="9999999.99" v-decorator="[
						'budget',
						{ rules: [{ required: true, message: '请输入预算，不少于300元，不超过9999999.99元' }] } ]" /> &nbsp;元
								</a-input-group>
						</div>
						</a-form-item>

						<a-form-item
							:label="$t('投放时间')"
							:labelCol="{span: 2}"
							:wrapperCol="{span: 200}"
						>
							<a-radio-group v-decorator="[
								'schedule_type',
											{ rules:[],initialValue: 'SCHEDULE_FROM_NOW'}
											]"
										@change="onschedule" button-style="solid">
								<a-radio-button value="SCHEDULE_FROM_NOW">
									从今天起长期投放
								</a-radio-button>
								<a-radio-button value="SCHEDULE_START_END">
									设置开始和结束日期
								</a-radio-button>
							</a-radio-group>
						</a-form-item>

						<div :class="[schedule_type =='SCHEDULE_START_END' ?'isblock' :'isnone']" class="mfont">
							<a-range-picker @change="ondate" :default-value="[moment(nowtime, dateFormat), moment(nowtime, dateFormat)]" />
						</div>

						<a-form-item
							:label="$t('付费方式')"
							:labelCol="{span: 2}"
							:wrapperCol="{span: 200}"
						>
							<a-radio-group v-decorator="[
											{ rules:[],initialValue: '0'}
											]"
										button-style="solid">

								<a-radio-button value="0">
									按展示付费(oCPM)
								</a-radio-button>
							</a-radio-group>
							<p class="pfont mfont">计划首次投放及其之后三个自然日内将获得超成本赔付保障，您可放心新建计划并投放，详见<span class="spanfont">oCPM赔付规则<a-icon type="form" /> </span> </p>
						</a-form-item>

						<a-form-item
							:label="$t('目标转化出价')"
							:labelCol="{span: 2}"
							:wrapperCol="{span: 200}"
							:required="true"
						>
						<div class="form-row" style="display:inline-block">
							<a-input-group compact>
								<a-input-number style="width: 300px" :min="0.1" :max="10000" v-decorator="[
						'cpa_bid',
						{ rules: [{ required: true, message: '请输入目标转化出价，不少于0.1元，不超过10000元' }] } ]" /> &nbsp;元&nbsp;&nbsp;请填入必填字段，获取建议出价
								<a-tooltip title="建议出价获取方式：<a class='color:2F88FF'>了解更多</a> 
		请填入本页面所有必填信息（除出价外），即可查看建议出价">
								<a-icon type="question-circle-o" />
								</a-tooltip>
								</a-input-group>
						</div>
						</a-form-item>
					</div>

					<div :class="[sceneselect =='SMART_BID_CONSERVATIVE'?'isblock':'isnone']">
						<a-form-item
							:label="$t('日预算')"
							:labelCol="{span: 2}"
							:wrapperCol="{span: 200}"
							:required="true"
						>
						<div class="form-row" style="display:inline-block">
							<a-input-group compact>
								<a-input-number style="width: 300px" :min="300" :max="9999999.99" v-decorator="[
						'budget',
						{ rules: [{ required: true, message: '请输入预算，不少于300元，不超过9999999.99元' }] } ]" /> &nbsp;元
								</a-input-group>
						</div>
						</a-form-item>
						<a-form-item
							:label="$t('投放时段')"
							:labelCol="{span: 2}"
							:wrapperCol="{span: 200}"
						>
							<a-radio-group default-value="0" name="schedule_time" button-style="solid">
								<a-radio-button value="0">
									不限
								</a-radio-button>
								<a-radio-button value="1">
									指定时间段
								</a-radio-button>
							</a-radio-group>
						</a-form-item>

						<a-form-item
							:label="$t('目标转化出价')"
							:labelCol="{span: 3}"
							:wrapperCol="{span: 200}"
							:required="true"
						>
							<div class="mfont">
								请填写完上方必填项后获取成本预估<br />
								<!-- <p> -->
									<a-checkbox disabled>
										我的预期成本不在此范围内，我需要在此基础上调整
									</a-checkbox>
								<!-- </p> -->
							</div>
						</a-form-item>
					</div>


						<!-- 右边信息 -->
					<div class="desc-wrapper">
						<div class="single-title">
							每日投放效果
						</div>
						<div class="pic-wrapper">
							<div :class="[sceneselect == 'SMART_BID_CUSTOM' ? 'isblock' :'isnone']">
								<img :src="imgurl('image.jpg')" style="width:300px;" alt="">
							</div>
							<div :class="[sceneselect == 'SMART_BID_CONSERVATIVE' ? 'isblock' :'isnone']">
								<img :src="imgurl('images.jpg')" style="width:300px;" alt="">
							</div>
						</div>
						<div class="desc-line">
							<div class="desc-title">
								适用场景：
							</div>
							<span class="desc-content" :class="[sceneselect == 'SMART_BID_CUSTOM' ? 'isblocks' :'isnone']">
								预算基本花不完，跑量较困难，希望成本相对稳定
							</span>
							<span class="desc-content" :class="[sceneselect == 'SMART_BID_CONSERVATIVE' ? 'isblocks' :'isnone']">
								跑量非常困难或追求激进放量，成本可能上浮
							</span>
						</div>
						<div class="desc-line">
							<div class="desc-title">
								适用场景：
							</div>
							<div class="desc-content" :class="[adjust =='FLOW_CONTROL_MODE_FAST' ? 'isblocks' :'isnone']">
								加速
								<a-tooltip title="尽可能的将广告投放出去，可能会在较短的时间内消耗完预算，也会因为竞争环境的变化导致预算消耗出现较大的波动">
									<a-icon type="question-circle-o" />
									</a-tooltip>
							</div>
							<div class="desc-content" :class="[adjust =='FLOW_CONTROL_MODE_BALANCE' ? 'isblocks' :'isnone']">
								匀速
								<a-tooltip title="系统会优化您的投放，让预算在设定的时间段内稳定的消耗完，以尽可能地从更多流量中挑选最优的流量">
									<a-icon type="question-circle-o" />
									</a-tooltip>
							</div>
							<div class="desc-content" :class="[adjust =='FLOW_CONTROL_MODE_SMOOTH' ? 'isblocks' :'isnone']">
								匀速
								<a-tooltip title="系统会优化您的投放，让预算在设定的时间段内稳定的消耗完，以尽可能地从更多流量中挑选最优的流量">
									<a-icon type="question-circle-o" />
									</a-tooltip>
							</div>
						</div>
						
					</div>
				</div>

				
			</div>
			<a-divider />
			<div class="code-box-demos" id="Ad-name">
				<div class="ad-group">
					<a-form-item  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
					<span slot="label">
						计划名称&nbsp;
						<a-tooltip title="What do you want others to call you?">
						<a-icon type="question-circle-o" />
						</a-tooltip>
					</span>
					<div class="form-row">
					<a-input style="width:400px;" v-decorator="[
					'name',
					{ rules: [{ required: true, message: '请输入计划名称' }],initialValue: name }
					]" placeholder="请输入计划名称" value="name" />
					</div>
					</a-form-item>
				</div>
			</div>
			<a-divider />

			<div class="code-box-demo">
				<div class="ad-group ad-font-size">
					当前广告账户：
					<strong>{{user.name}}（{{account_id}}）</strong>
				</div>
			</div>
			<a-divider />
			<div class="code-box-demo" style="text-align:right;">
				<a-space>
				<a-button size="large" @click="cancel">
					取消
				</a-button>
				<a-button size="large" :loading="logging" @click="savebtn(1)" type="primary">
					保存并关闭
				</a-button>
				<a-button size="large" :loading="logging" @click="savebtn(2)" type="primary">
					保存并新建创意
				</a-button>
				</a-space>
			</div>

		</a-form>
		</a-col>
	</a-row>
	</div>
</div>
</template>
<script src="./plan.js">

</script>
<style lang="less" scoped>
  .example {
    text-align: center;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin-bottom: 20px;
    /* padding: 30px 50px; */
    margin: 20px 0;
  }

.convertradio{
	width: 500px;
	padding: 12px 10px 12px 16px;
	display: flex;
	border: 1px solid #dadfe3;
	// margin-right: auto;
}

.convertradio a{
	margin-left: 50px;
	float: right;
	font-size: 14px;
    color: #999;
}

.ant-collapse > .ant-collapse-item > .ant-collapse-header{
	color:#2F88FF;
}

.desc-wrapper{
    position: absolute;
    right: 24px;
    top: 0px;
    height: 364px;
    width: 324px;
    font-family: PingFangSC;
    font-size: 14px;
    line-height: 16px;
    border: 1px solid #EBEBEB;
	border-radius: 4px;
	padding: 12px;
	background: #fff;
	z-index: 1;
}
.single-title{
	margin-top: 7px;
    font-weight: 700;
}

.desc-title{
	color: #333333;
    display: inline-block;
}
.desc-content{
	display: inline-block;
	color:#999;
}

.ant-col-18{
	padding: 0 20px 20px 20px;
}
.ad-row-title{
	font-size: 22px;
}

.isblock{
  display: block;
}

.isblocks{
  display: inline-block;
}


.isnone{
  display: none;
}

.ad-row-title span{
    font-size: 14px;
    line-height: 14px;
    padding-left: 8px;
    margin-left: 0;
    color: #2F88FF;
}

.ad-group{
	padding-left: 20px;
	margin-top: 32px;
	font-size: 14px;
	line-height: 20px;
}

.code-box-demos{
	padding-top:20px;
}

.ant-form-item-control-wrapper{
	display: inline-block !important;
}

// 省市
.byted-select-panel-moduler{
	width: 150px;
	display: inline-block;
	-webkit-box-flex: 0;
	border:1px solid #e0e0e0;
	margin-top:10px;
}

.listbox{
	height: 192px;
    padding: 10px;
    overflow-y: auto;
    position: relative;
}

.byted-select-panel-moduler-header{
	border-bottom: 1px solid #e0e0e0;
    background-color: #fafafa;
    color: #333;
    font-size: 14px;
    line-height: 22px;
    padding: 8px 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.byted-select-panel-moduler-header-title{
	font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
//定向右边内容
.ad-audience-estimate-wrapper{
	width:237px;
	position: absolute;
	right: 0;
	top:0;
	padding: 10px;
}
.ad-audience-estimate-cover{
	background-color: #F8F9FA;
	border-radius: 4px 4px 0 0;
	padding: 10px;
	font-size: 12px;
    color: #333;
    padding: 16px 0 8px 12px;
    border: 1px solid #E4E9ED;
}

.ad-audience-estimate-cover-text{
	display: inline-block;
    max-width: 108px;
    min-width: 100px;
    line-height: 20px;
    margin-bottom: 9px;
    color: #999;
}


.ant-collapse > .ant-collapse-item > .ant-collapse-header{
	color:#2F88FF;
}
.ant-collapse-header{
	color:#2F88FF !important;
}

.other-covernum{
	color: #333;
    font-size: 12px;
}

.category-label{
	color: #333;
}

.category-item{
	color: #999;
}

.pfont{
	color: #999;
	font-size: 12px;
}
.spanfont{
	color: #2F88FF;
	font-size: 12px;
	cursor: pointer;
}

.mfont{
	margin-left: 100px;
}

// 滑动条
#components-slider-demo-mark h4 {
  margin: 0 0 16px;
}
#components-slider-demo-mark .ant-slider-with-marks {
  margin-bottom: 44px;
}

.scene{
	display: inline-block;
	padding: 8px 12px;
    border-radius: 4px;
    background: #ffffff;
    width: 206px;
    border: 1px solid #dadfe3;
	cursor: pointer;
	margin-right: 10px;
}
.scene .title{
	font-family: PingFangSC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: #333333;
}
.scene p{
	margin-bottom: 0;
	font-size: 12px;
}

.sceneselect{
	background: #EBF3FF;
    border: 1px solid #2f88ff;
}



	.content2{
		width:300px;
		height: 300px;
		// padding: 10px;
		border: 1px solid #e0e0e0;
		overflow-y: scroll;
		display: inline-block;
		display: block;
		flex-direction: column;
		font-size: 12px;
	}
	.content2 .title{
		flex-flow: column;
		display: flex;
		height: 80px;
		padding: 8px 12px;
		background: #f8f9fa;
		border-bottom: 1px solid #dadfe3;
		border-radius: 4px 4px 0 0;
	}
	.content {
		display: flex;
		width: 100%;
	}
	.text{
		width:200px;
		height: 300px;
		padding: 10px;
		border: 1px solid #e0e0e0;
		overflow-y: scroll;
		display: inline-block;
		display: flex;
		flex-direction: column;
		font-size: 22px;
		margin: 10px;
	}
	.checkbox-text{
		line-height: 15px;
		font-size:14px;
	}
	.checkbox{
		margin-right: 5px;
		border-radius: 0px;
		border: #13c2c2 1px solid;
		width: 15px;
		height: 15px;
		position: relative;
	}
	.trueimg{
		position: absolute;
		left:0;
		z-index: 1;
		width: 15px;
		height: 15px;
	}
</style>
